
// 弹窗步骤
import React,{ useState } from 'react';
import {
  Button,
  Steps,
  Row,
  Space,
  Col,
  Upload,
  Table,
  Tag,
  Result,
} from 'antd';
import { useModel } from 'umi';
import AdvancedModal from '@/components/Modal/AdvancedModal';
import { IconFont } from '@/utils/common/tool';
import { uploadFileUrl } from '@/service/common/upload';
import styles from './index.less';

interface Props {
  open: boolean;
  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
  steps: number; // 步骤
  uploadProps: any; // 上传参数
  onSubmit: (params: any) => void; // 完成操作
  title: any; // 标题
  stepsData: any[];
}

const { Step } = Steps;
function OrderSteps({
  open,
  setIsOpen,
  steps,
  onSubmit,
  title,
  stepsData,
}: Props) {
  const totalSteps = steps - 1;
  const { initialState } = useModel('@@initialState');
  const { fileName } = initialState || {};
  const [current, setCurrent] = useState(0);
  const next = () => {
    setCurrent(current + 1);
  };

  const prev = () => {
    setCurrent(current - 1);
  };
  const uploadProps = {
    action: uploadFileUrl,
    name: fileName,
    data: {
      modelName: 'spAccess',
      targetAttr: 1,
    },
    onChange() {
     
    },
    // filesList,
  };
  return (
    <AdvancedModal
      isOpen={open}
      setIsOpen={setIsOpen}
      title={title}
      width="40%"
      footer={null}
    >
      <Row gutter={12}>
        <Col sm={{ span: 18, offset: 3 }} className={styles.steps}>
          <Steps current={current} labelPlacement="vertical">
            {stepsData.map((item: any, index) => (
              // eslint-disable-next-line react/no-array-index-key
              <Step title={item} key={index} />
            ))}
          </Steps>
        </Col>
        {current === 0 && (
          <>
            <Col sm={{ span: 24 }}>
              <div className="stepBox">
                <div className="inlineImg">
                  <IconFont type="icon-xiazai" />
                </div>
                <div className="inlineText">
                  <div className="text title">下载文件模板、填写导入信息</div>
                  <div className="text ">必填字段：请参考下载的Excel表格</div>
                  <Button
                    type="primary"
                    shape="round"
                    size="small"
                    className="downOrupload"
                  >
                    下载模板
                  </Button>
                </div>
              </div>
            </Col>
            <Col sm={{ span: 24 }}>
              <div className="stepBox">
                <div className="inlineImg">
                  <IconFont type="icon-a-shangchuan1" />
                </div>
                <div className="inlineText">
                  <div className="text title">上传填写的表格信息</div>
                  <div className="text">
                    支持文件xls、xlsx，文件大小不超过10M
                  </div>
                  <Upload {...uploadProps}>
                    <Button
                      type="primary"
                      shape="round"
                      size="small"
                      className="downOrupload"
                    >
                      上传文件
                    </Button>
                  </Upload>
                </div>
              </div>
            </Col>
          </>
        )}
        {current === 1 && (
          <div className="importData">
            <p>
              <Tag color="success">已成功100条</Tag>
              <Tag color="error">失败10条</Tag>
            </p>
            <Table
              columns={[
                { title: '订单编号', dataIndex: '', align: 'center' },
                { title: '司机名称', dataIndex: '', align: 'center' },
                { title: '车牌号', dataIndex: '', align: 'center' },
                { title: '非滴滴司机ID', dataIndex: '', align: 'center' },
                { title: '状态', dataIndex: '', align: 'center' },
              ]}
              dataSource={[]}
            />
          </div>
        )}
        {current === totalSteps && (
          <div className="result">
            <Result
              status="success"
              title="导入成功！"
              subTitle="成功导入25条数据"
            />
          </div>
        )}
      </Row>
      <Row justify="center" style={{ marginTop: '20px' }}>
        <Space>
          {current !== 0 && current !== totalSteps && (
            <Button type="primary" onClick={prev}>
              上一步
            </Button>
          )}
          {current !== totalSteps && (
            <Button type="primary" onClick={next}>
              下一步
            </Button>
          )}
          {current === totalSteps && (
            <Button
              type="primary"
              onClick={() => {
                onSubmit(() => {
                  setIsOpen(false);
                  setCurrent(0);
                });
              }}
            >
              完成
            </Button>
          )}
        </Space>
      </Row>
    </AdvancedModal>
  );
}

export default OrderSteps;
